The Vision and Challenge

When I stepped into my role as Director of Design, I encountered a product interface that wasn't meeting our users' needs or our business objectives. Our engineering team was working with Vuetify, an aging UI library that required frequent custom modifications from our design team. Beyond the technical constraints, our product faced deeper challenges: an outdated interface that lacked responsiveness, inconsistent button styles that created cognitive overhead, and a confusing page hierarchy that hindered navigation. Most concerning was our failure to meet ADA and WCAG accessibility standards, limiting our product's reach and effectiveness.

The platform's clinical and administrative feel didn't reflect the warmth and efficiency we wanted to provide to healthcare professionals. While our previous iteration of Canopy had made strides in user journey and usability, I saw an opportunity to push further. We could create something more than just a functional tool—we could develop a design system that would make Canopy genuinely enjoyable to use while significantly improving development efficiency.

Building the Foundation

Our journey began with a methodical approach to understanding and defining our visual direction. We developed three distinct mood boards, each exploring different possibilities for Canopy's future aesthetic. Through careful evaluation and stakeholder input, we converged on a direction that emphasized natural elements and created a calming atmosphere—an intentional choice to support healthcare professionals whose daily work was often stressful and demanding.

This visual direction became the foundation for a complete reimagining of our application framework and navigation. We created comprehensive prototypes that demonstrated how existing products would transform under the new system, including mobile-responsive versions that showcased the system's flexibility. When I presented this vision to our Product VP and Chief Medical Officer, it didn't just show them a new look—it opened their eyes to our product's true potential and our team's capability to deliver it.

Strategic Leadership and Team Building

Recognizing that success would require exceptional talent, I took an unconventional approach to building our team. With only three designers whose UI skills needed enhancement, I bypassed traditional hiring channels and conducted detailed research through industry blogs, LinkedIn profiles, and portfolio websites. This led me to Millie Bley, a UI designer whose work demonstrated extraordinary attention to detail and a genuine passion for design systems. Through personal outreach and informal discussion, I successfully recruited her despite her not actively seeking new opportunities—a strategic hire that proved instrumental to our success.

The technical implementation required careful alignment with our engineering team. Over several months, I built strong relationships with lead front-end engineers, understanding their plans for a new microservices architecture. This insight allowed me to position the design system as a natural complement to their technical vision, creating a modular foundation that would support both teams' objectives.

The Framework and Implementation

Our design system transcended mere visual consistency. We established ten core design principles that emphasized user needs and efficiency, from task streamlining to inclusive design. These principles guided every aspect of our work, ensuring we created not just components but a comprehensive framework for user experience.

To bridge the gap between design and development, I introduced Storybook as our component documentation platform. This decision proved particularly valuable for developer onboarding, providing a visual way to understand and interact with our component library. The system grew to encompass much more than standard UI elements—we developed comprehensive guidelines for copywriting, accessibility, responsive design, illustrations, and animations. This holistic approach helped Canopy develop its own personality as a trusted digital assistant for healthcare professionals.

Maintenance and Evolution

As we scaled the system across more products, we encountered new challenges that required proactive management. New developers sometimes created redundant components, and some frontend engineers hesitated to contribute to the system. We addressed these issues through systematic auditing, careful alignment between Figma and Storybook components, and a robust governance process that included enhanced onboarding procedures.

Key Insights and Impact

The success of the Bloom UI design system taught us valuable lessons about implementing large-scale design changes. We learned the importance of usability testing even for basic UI components and the critical role of quality assurance in system updates. A seemingly simple color change from red to green in our notification system demonstrated how even minor updates could significantly impact users' workflow.

Our gradual rollout strategy, introducing changes first in new products before updating existing ones, proved remarkably effective. While I initially worried about maintaining two different visual styles simultaneously, this approach allowed users to adapt naturally to the changes while maintaining their productivity.

The impact of our work extended beyond visual consistency. The Bloom UI design system transformed Canopy into a product that our entire team takes pride in. New designers can now onboard quickly and start contributing meaningfully to our product ecosystem. Most importantly, we've created a foundation that supports both our current needs and future growth, demonstrating that thoughtful design leadership can drive substantial organizational change.